<!-- CalculatorSection.vue -->
<template>
  <div class="calculator-section additional-controls">
    <div class="control-item">
      <label for="calculator">计算器:</label>
      <v-select
          v-model="selectedCalculator"
          :options="calculatorsdata"
          :reduce="option => option.code"
          label="name"
          @update:modelValue="onCalculatorSelected"
      >
        <template #option="{ code, name }">
          {{ code }} - {{ name }}
        </template>
      </v-select>
      <p>当前选中的计算器: {{ getCalculatorName(selectedCalculator) }}</p>
    </div>

    <component :is="currentCalculatorComponent" v-if="currentCalculatorComponent"></component>

    <!-- 这里可以添加其他计算器类型的输入字段 -->

    <div class="control-item checkbox-item">
      <input type="checkbox" id="agentRate" v-model="useAgentRate">
      <label for="agentRate">代理费率</label>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'
// 导入计算器组件
import UnitCalculator from './UnitCalculator.vue'
import {getCalculatorData} from "@/components/Forwarder/sharedFreightData";
export default {
  name: 'CalculatorSection',
  components: {
    vSelect,
    UnitCalculator,
  },
  props: {

    calculators: {
      type: Object,
      required: true,
      default: () => ({
        business: []
      })

  },
  },
  emits: ['calculator-selected', 'unit-price-change', 'agent-rate-change'],
  setup(props, { emit }) {
    const selectedCalculator = ref(null)
    const unitPrice = ref(0)
    const useAgentRate = ref(false)

    const calculatorsdata = getCalculatorData()
    const currentCalculatorComponent = computed(() => {
      switch(selectedCalculator.value) {
        case 'UNT':
          return 'UnitCalculator'
          // 可以在这里添加其他计算器类型的case
        default:
          return null
      }
    })
    const onCalculatorSelected = (value) => {
      console.log('Selected calculator code:', value)
      selectedCalculator.value = value
      emit('calculator-selected', value)
    }

    const getCalculatorName = computed(() => (code) => {
      const calculator = props.calculators.find(c => c.code === code)
      return calculator ? calculator.name : ''
    })



    const onUnitPriceChange = () => {
      emit('unit-price-change', unitPrice.value)
    }

    watch(useAgentRate, (newValue) => {
      emit('agent-rate-change', newValue)
    })

    return {
      selectedCalculator,
      unitPrice,
      useAgentRate,
      onCalculatorSelected,
      getCalculatorName,
      calculatorsdata,
      onUnitPriceChange,

      currentCalculatorComponent
    }
  }
}
</script>

<style scoped>
.calculator-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.control-item {
  margin-bottom: 10px;
}

.control-item label {
  display: block;
  margin-bottom: 5px;
}

.control-item input[type="number"],
.control-item input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.checkbox-item {
  display: flex;
  align-items: center;
}

.checkbox-item input[type="checkbox"] {
  margin-right: 5px;
}

:deep(.v-select) {
  width: 100%;
}

:deep(.v-select .vs__dropdown-toggle) {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>
